<template>
  <uni-popup ref="timing" type="bottom">
    <view class="selection">
      <view class="text">选择预计送达时间</view>
      <view class="space-between">
        <view class="left">
          <view v-for="(item,index) in day" :key="item" :style="{background:time1===item.day?'#fff':''}"
            @click="change1(item.day,index)">{{item.day}}</view>
        </view>
        <view class="right">
          <view v-for="(item) in dataList" :key="item" :style="{color:time2===item.time?'#1B91FF':''}"
            class="space-between" @click="change2(item.time,item.date)">
            {{item.date}}
            <uni-icons type="checkmarkempty" size="20" color="#1B91FF" v-if="time2===item.time"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { toPublish } from '@mqtt';
  import { showLoading } from '@/utils/prompt';
  import { getSubscribeTime } from '@/gql/reservation';
  const timing = ref(null)
  const day = ref()
  const dataList = ref()
  const time1 = ref()
  const time2 = ref()
  const emit = defineEmits(['jisuanScore']);
  function init() {
    showLoading()
    const payload = {
      query: getSubscribeTime
    };
    toPublish(
      'ql/plug/getSubscribeTime',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getSubscribeTime } = obj.data;
        if (getSubscribeTime.length < 1) {
          return
        }
        day.value = getSubscribeTime
        time1.value = getSubscribeTime[0].day
        dataList.value = getSubscribeTime ? getSubscribeTime[0].times : ''
        time2.value = dataList.value[0].time
        emit('jisuanScore', time2.value, dataList.value[0].date,)
      }
    );
  }
  function open() {
    init()
    timing.value.open()
  }
  function change1(data : string, index : number) {
    time1.value = data
    dataList.value = day.value[index].times
    time2.value = dataList.value[0].time
  }
  function change2(time : any, data : string) {
    timing.value.close()
    if (time1.value === day.value[0].day) {
      emit('jisuanScore', time, data)
    } else {
      emit('jisuanScore', time, data, time1.value)
    }
  }
  defineExpose({ open, init });
</script>

<style scoped lang="less">
  .selection {
    width: 100%;
    background: #fff;
    border-radius: 10px 10px 0px 0px;

    .text {
      width: 100%;
      text-align: center;
      padding: 15rpx;
      box-sizing: border-box;
    }

    .left {
      width: 35%;
      height: 40vh;
      overflow: auto;
      background: #eee;

      view {
        width: 100%;
        padding: 30rpx 0px;
        box-sizing: border-box;
        text-align: center;
      }
    }

    .right {
      width: 60%;
      height: 40vh;
      overflow: auto;

      view {
        width: 100%;
        padding: 30rpx 10rpx 30rpx 0px;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
      }
    }
  }
</style>